<template>
  <div class="main-panel" :style="{ '--scaleY': scaleY, '--scaleX': scaleX }">
    <MapHandler />
    <LeftPanel />
    <RightPanel />
    <BottomPanel />
    <MapTool />
    <Header />
    <Dialog />
  </div>
</template>

<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import MapTool from "@/components/mapTools/CMapTool.vue";
import LeftPanel from "@/components/leftPanels/CLeftPanel.vue";
import RightPanel from "@/components/rigthPanels/CRightPanel.vue";
import BottomPanel from "@/components/bottomPanels//CBottomPanel.vue";
import Header from "@/components/CHeader.vue";
import Dialog from "@/components/dialogs/CDialog.vue";
import MapHandler from "@/components/mapHandlers/CMapHandler.vue";
@Component({
  name: "MainPanel",
  components: {
    MapTool,
    LeftPanel,
    RightPanel,
    BottomPanel,
    Header,
    MapHandler,
    Dialog
  }
})
export default class extends Vue {
  scaleX: number = 1;
  scaleY: number = 1;

  mounted() {
    this.getScale();
    window.addEventListener("resize", () => {
      this.getScale();
    });
  }

  // 比例
  private getScale() {
    const height = window.innerHeight;
    const width = window.innerWidth;
    this.scaleY = height / 1080;
    this.scaleX = width / 1920;
  }
}
</script>

<style lang="scss">
.main-panel {
  top: 0;
  left: 0;
  position: absolute;
  overflow: hidden;
  height: 100vh;
  width: 100vw;
  pointer-events: none;
  & > * {
    transform: scaleX(var(--scaleX)) scaleY(var(--scaleY));
    transform-origin: 0 0;
    user-select: none;
  }
  .left-panel {
    top: calc(93px * var(--scaleY));
    left: 0;
  }
  .right-panel {
    top: calc(93px * var(--scaleY));
    right: 0;
    transform-origin: 100% 0;
  }
  .bottom-panel {
    bottom: 0;
    left: calc(467px * var(--scaleX));
    transform-origin: 0 100%;
  }
  .dialog {
    position: absolute;
    top: 0;
    left: 0;
  }
}
</style>
